{extend name="$index_style_layout" /}
{block name="head_title"}申请加入{:M('name')}{/block}

{block name="body_content"}
<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">

<style type="text/css">
.addBox{
	max-width: 1200px;
	overflow: hidden;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 30px;
	background: #F5F5F5;
}
.addBox .topBoxs{
	display: table;
	width: 100%;
	background: #FFF;
	border-bottom: #EEE solid 1px;
}
.addBox .topBoxs li{
	display: table-cell;
	text-align: left;
	vertical-align: middle;
	padding: 10px 0;
}
.addBox .topBoxs li.logo{
	width:50px;
	padding-left: 10px;
	padding-right: 10px;
}
.addBox .topBoxs li.logo img{
	max-height: 50px;
	max-width: 50px;
	border-radius: 50%;
}
.addBox .topBoxs li.info span{
	font-size: 20px;
}
.addBox .topBoxs li.atten{
	width:50px;
	text-align: center;
	font-size: 22px;
}
.addBox .type1{
	margin: 10px 10px 0px 10px;
	background: #FFF;
	padding: 10px;
}
.addBox .type1 dl{
	display: table;
	width: 100%;
}
.addBox .type1 dl dt,.addBox .type1 dl dd{
	display: table-cell;
	vertical-align: middle;
}
.addBox .type1 dl dd{
	text-align: right;
}
.addBox .types ol{
	padding: 15px 10px 5px 12px;
	line-height: 20px;
	font-weight:bold;
	font-size:14px;
}
.addBox .types li{
	margin: 0px 10px;
}
.addBox .button{
	text-align: center;
	padding:10px;
}
.addBox button{
	margin-top: 20px;
	background: #318FED;
	border: 0px;
	width: 200px;
	text-align: center;
	height: 50px;
	line-height: 50px;
	color: #FFF;
}
</style>
 
<div class="addBox">
<!--
	<ul class="topBoxs">
		<li class="logo"><a href="/"><img src="__STATIC__/bbs/logo1.png"></a></li>
		<li class="info"><span>{:M('name')}</span></li>
		<li class="atten"><a href="{:get_url('member')}"><i class="si si-user"></i></a></li>
	</ul>
-->
	<ul class="types">
		<ol>内容标题：</ol>
		<li>{$info.title}
		</li>
	</ul>
	<ul class="types">
		<ol>需要付费才能浏览:</ol>
		<li><span style="color:red;font-size:16px;font-weight:bold;">{$info.price}</span> 元
		</li>
	</ul>
	{if $info.description!=''}
	<ul class="types">
		<ol>介绍：</ol>
		<li>{$info.description}
		</li>
	</ul>
	{/if}
	{if $info.ext_id&&modules_config('qun')}
	<ul class="types">
		<ol>提示：</ol>
		<li>加入VIP__QUN__可以免费浏览   <input type="button" class="layui-btn layui-btn-warm layui-btn-sm" value="我要加入" onclick="join_group()"> 
		</li>
	</ul>
	{/if}
	<div class="button">
		<button type="button"  onclick="buy()">确认付费</button>
	</div>
	
<style type="text/css">
.picshow {width:65px; float:left; overflow:hidden; text-align:center; padding:15px 0; }
.picshow .img {border:1px solid #d9d9d9; width:50px; height:50px;  border-radius:100%; overflow:hidden;}
.picshow .img img{width:50px; height:50px;}
.picshow .info {margin-top:15px; overflow:hidden; height:30px;}
</style>
	<ul class="types">
		<ol>最近付费用户(已有<span class="total_num">0</span>人付费)：</ol>
		<li class="cms_listmember_buyer">

						{qb:tag name="cms_listmember_buyer" class="app\cms\model\Buyer@get_label" order="id" rows="10" union="aid=id" js="cms_listmember_buyer"}
							<div class="picshow" title="付费时间:{:format_time($rs.create_time,'Y-m-d H:i')} ">
								<div class="img"><a target="_blank" href="{$rs.url}"><img src="{$rs.icon}" onerror="this.src='__STATIC__/images/nobody.gif'"/></a></div>
								<div class="info"><a target="_blank" href="{$rs.url}">{$rs.username|get_word=10}</a></div>
							</div>
						{/qb:tag}
		</li>
	</ul>
<script type="text/javascript">
function cms_listmember_buyer(res){
	if(res.code==0){
		$(".total_num").html(res.paginate.total);
	}
}
</script>
</div>
<!--加入圈子-->
<script type="text/javascript">var qun_api_url = "{:urls('qun/wxapp.member/api')}";</script>
<script type="text/javascript" src="__STATIC__/qun/qun.js"></script>

<script type="text/javascript">
function join_group(){
	qun_api("{$info.ext_id}",'join',function(res){
		if(res.code==0){
			setTimeout(function(){
				window.location.reload();
			},1000);
		}
	});
}

function buy(){
	$.get("{:urls('wxapp.show/buy','id='.$id)}",function(res){
		if(res.code==0){
			layer.msg('支付成功');
			setTimeout(function(){
				window.location.reload();
			},1000);
		}else if(res.code==2){
			layer.confirm(res.msg,{btn:['马上充值','取消']},function(){
				window.location.href = res.data.payurl;
			});			
		}else if(res.code==3){
			layer.confirm(res.msg,{title:'登录提醒!',btn:['马上登录','取消']},function(){
				window.location.href = res.data.url;
			});			
		}else{
			layer.alert(res.msg);
		}
	});
}
</script>	
{/block}